<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <script src="chrome://resources/js/cr.js"></script>
  <script src="chrome://resources/js/cr/event_target.js"></script>
  <script src="chrome://resources/js/load_time_data.js"></script>
  <script src="chrome://resources/js/assert.js"></script>
  <script src="chrome://resources/js/util.js"></script>

  <script src="chrome://password-change/authenticator.js"></script>

  <script type="module" 
      src="chrome://password-change/password_change.js"></script>

  <dom-module id="password-change">
    <template>
      <style>
        :host {
          height: 100%;
          left: 0;
          margin: 0;
          padding: 0;
          position: fixed;
          top: 0;
          width: 100%;
        }

        #body {
          align-self: stretch;
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          height: 100%;
          width: 100%;
        }

        #samlContainer {
          /* #F1F3F4 */
          background: rgb(241, 243, 244);
          /* #000000 */
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.17);
          display: flex;
          height: 44px;
          justify-content: flex-end;
          text-align: center;
        }

        #samlNoticeMessage {
           /* #6a6a6a */
          color: rgb(106, 106, 106);
          flex: 1;
          font-size: 13px;
          padding-top: 15px;
        }

        #samlCloseButton {
          --cr-icon-button-margin-end: 0;
          --cr-icon-button-margin-start: 0;
        }

        #signinFrame {
          flex: 1;
          height: 100%;
          width: 100%;
        }
      </style>

      <div id="body">
        <div id="samlContainer">
          <div id="samlNoticeMessage">
            [[i18n('hostedHeader')]]
          </div>
          <cr-icon-button id="samlCloseButton" iron-icon="cr:close"
              on-click="onCloseTap_">
          </cr-icon-button>
        </div>
        <webview id="signinFrame" name="signinFrame" allowscaling>
        </webview>
      </div>
    </template>
  </dom-module>
</head>

<body>
  <password-change id="main-element">
  </password-change>
</body>
</html>
